import { ReqGetDoctorParams } from "@/pages/hospital/hospitalList/type";
import { Departments, DoctorItem } from "@/pages/hospital/hospitalList/type";
import { Button, Card, Col, Pagination, Row, Tag, Tree } from "antd";
import Table, { ColumnsType } from "antd/lib/table";
import { DataNode } from "antd/lib/tree";
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { reqGetDepartments, reqGetDoctors } from './adress';

export default function HospitalSchedule() {
  let loction = useLocation()
  //从地址栏中获取 hoscode 参数
  let { hoscode } = useParams();
  //定义科室列表的状态
  let [departments, setDepartments] = useState<Departments>([]);
  //定义高度状态
  let [height, setHeight] = useState(400);

  useEffect(() => {
    console.log(loction.state);

  }, [])

  //准备数据
  const treeData: DataNode[] = [
    {
      title: "parent 1",
      key: "0-0",
      children: [
        {
          title: "parent 1-0",
          key: "0-0-0",
          disabled: true,
          children: [
            {
              title: "leaf",
              key: "0-0-0-0",
              disableCheckbox: true,
            },
            {
              title: "leaf",
              key: "0-0-0-1",
            },
          ],
        },
        {
          title: "parent 1-1",
          key: "0-0-1",
          children: [
            {
              title: <span style={{ color: "#1890ff" }}>sss</span>,
              key: "0-0-1-0",
            },
          ],
        },
      ],
    },
  ];
  //医生测试数据
  let data: DoctorItem[] = [
    {
      "id": "653520f4c735f1431ec771fc",
      "createTime": "2023-07-31 11:47:30",
      "updateTime": "2023-07-31 11:47:30",
      "isDeleted": 0,
      "param": {
        "dayOfWeek": "周六",
        "depname": "多发性硬化专科门诊",
        "hosname": "北京大学国际医院"
      },
      "hoscode": "1000_11",
      "depcode": "200040878_11",
      "title": "医师",
      "docname": "",
      "skill": "内分泌科常见病。",
      "workDate": "2024-01-27",
      "workTime": 0,
      "reservedNumber": 330,
      "availableNumber": 220,
      "amount": 100,
      "status": 1,
      "hosScheduleId": "1685859704024268802"
    },
    {
      "id": "653520f4c735f1431ec771fd",
      "createTime": "2023-07-31 11:47:30",
      "updateTime": "2023-07-31 11:47:30",
      "isDeleted": 0,
      "param": {
        "dayOfWeek": "周六",
        "depname": "多发性硬化专科门诊",
        "hosname": "北京大学国际医院"
      },
      "hoscode": "1000_11",
      "depcode": "200040878_11",
      "title": "副主任医师",
      "docname": "裴育",
      "skill": "骨质疏松和骨代谢疾病、糖尿病、甲状腺疾病。",
      "workDate": "2024-01-27",
      "workTime": 0,
      "reservedNumber": 40,
      "availableNumber": 39,
      "amount": 100,
      "status": 1,
      "hosScheduleId": "1685859704921849858"
    },
    {
      "id": "653520f4c735f1431ec771fe",
      "createTime": "2023-07-31 11:47:30",
      "updateTime": "2023-07-31 11:47:30",
      "isDeleted": 0,
      "param": {
        "dayOfWeek": "周六",
        "depname": "多发性硬化专科门诊",
        "hosname": "北京大学国际医院"
      },
      "hoscode": "1000_11",
      "depcode": "200040878_11",
      "title": "副主任医师",
      "docname": "邵迎红",
      "skill": "内分泌与代谢性疾病。",
      "workDate": "2024-01-27",
      "workTime": 1,
      "reservedNumber": 27,
      "availableNumber": 10,
      "amount": 100,
      "status": 1,
      "hosScheduleId": "1685859705790070785"
    }
  ];
  //定义表格结构
  let columns: ColumnsType<DoctorItem> = [
    {
      title: '序号',
      render: (_, record, index) => index + 1
    },
    {
      title: '职称',
      dataIndex: 'title'
    },
    {
      title: '号源时间',
      dataIndex: 'workDate'
    },
    {
      title: '总预约数',
      dataIndex: 'reservedNumber'
    },
    {
      title: '剩余预约数',
      dataIndex: 'availableNumber'
    },
    {
      title: '挂号费(元)',
      dataIndex: 'amount'
    },
    {
      title: '擅长技能',
      dataIndex: 'skill'
    },
  ];

  //使用 useEffect
  useEffect(() => {
    let getData = async () => {
      //发送请求获取科室的信息
      let departments = await reqGetDepartments(hoscode as string);
      //更新科室的状态
      setDepartments(departments);
    }
    getData();
  }, []);

  //计算样式
  useEffect(() => {
    //计算高度
    let height = document.documentElement.clientHeight - 64 - 34 - 24 - 22 - 14 - 20;
    //更新
    setHeight(height);
  }, []);


  return (
    <Card>
      {/* 顶部路径导航 */}
      <p>选择：北京大学国际医院 / 多发性硬化专科门诊 / 2024-01-13</p>
      {/* 内容区 */}
      <Row gutter={20}>
        {/* 左侧科室 */}
        <Col span={5}>
          <div style={{ border: "solid 1px #ddd", height: height, overflowY: 'auto' }}>
            <Tree
              defaultExpandedKeys={["0-0-0", "0-0-1"]}
              defaultSelectedKeys={["0-0-0", "0-0-1"]}
              onSelect={() => { }}
              treeData={departments as []}
              fieldNames={{
                title: 'depname',
                key: 'depcode'
              }}
            />
          </div>
        </Col>
        {/* 右侧内容 */}
        <Col span={19}>
          {/* 顶部的日期列表 */}
          {new Array(5).fill(5).map((item, index) => {
            return (
              <Tag color="green" key={index}>
                <div>2024-01-12 周六</div>
                <div>269 / 397</div>
              </Tag>
            );
          })}
          <div className="h-20"></div>
          {/* 分页结构 */}
          <Pagination
            total={50}
            pageSize={5}
            current={1}
            showSizeChanger={true}
            pageSizeOptions={[5, 10, 15, 20]}
          ></Pagination>
          <div className="h-20"></div>
          {/* 表格结构 */}
          <Table columns={columns} bordered dataSource={data} rowKey={"id"} pagination={false} />
          <div className="h-20"></div>
          {/* 返回按钮 */}
          <Button>返回</Button>
        </Col>
      </Row>
    </Card>
  );
}
